<template>
  <div class="work-container">
    <van-panel title="事件详情">
      <van-list v-if="form">
        <van-cell
          title="接收时间"
          :value="parseTime(form.receptionTime)"
        />
        <van-cell
          title="提交人"
          :value="form.presenterNick"
        />
        <van-cell
          title="来源"
          :value="selectDictLabel(dict.type.sl_db_src, form.source)"
        />
        <van-cell
          title="类型"
          :value="selectDictLabel(dict.type.sl_event_type, form.dbType)"
        />
        <van-cell
          title="级别"
          :value="selectDictLabel(dict.type.sl_event_level, form.dbLevel)"
        />
        <van-cell
          title="内容"
          :value="eventInfo.eventContent"
        />
      </van-list>
    </van-panel>
    <div
      v-if="form.isDone!='2'"
      class="fixed-bar"
    >
      <van-button
        type="info"
        round
        :loading="loading"
        @click="onSubmit"
      >办理完成</van-button>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { Dialog } from 'vant';

import { getDbinfo, doneDbinfo } from "@/api/sl/dbinfo";

export default {
  name: "h5Dbinfo-event",
  dicts: ['sl_event_level', 'sl_event_type', 'sl_db_src'],
  components: {
    [Notify.Component.name]: Notify.Component,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      // 查询参数
      dbId: undefined,
      loading: false,
      form: {},
      eventInfo: {}
    };
  },
  computed: {
  },
  created() {
    this.dbId = this.$route.query.dbId;
    this.load();
  },
  methods: {
    load() {
      if (this.dbId) {
        this.getDbinfo();
      }
    },
    getDbinfo() {
      this.loading = true
      getDbinfo(this.dbId).then((response) => {
        if (response.code === 200) {
          this.form = response.data || {};
          this.eventInfo = response.hbInfo || {};
        } else {
          Notify({ type: "danger", message: "出错了" });
        }
        this.loading = false
      });
    },
    onSubmit() {
      Dialog.confirm({
        title: '提示',
        message: '确定办理完成？',
      }).then(() => {
        this.loading = true
        if (this.form.dbId != null) {
          doneDbinfo(this.form.dbId).then(response => {
            Notify({ type: "success", message: "操作成功" });
            this.load();
          });
          this.loading = false
        }
      }).catch(() => {
        // on cancel
      });

    }
  },
};
</script>

<style lang="scss" scoped>
.work-container {
  padding-bottom: 80px;
  &::v-deep {
    .van-cell-group {
      & + .van-cell-group {
        margin-top: 10px;
      }
    }
    .van-panel__header {
      font-size: 16px;
      font-weight: bold;
      span {
        &::before {
          content: '□';
          margin-right: 6px;
        }
      }
    }
    .van-panel__content {
      padding: 15px;
    }
  }
}
.user-panel {
  position: relative;
  padding: 5px;
  background-color: #ebedf0;
  margin-top: 5px;
}
.fixed-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 10px 5px rgba(51, 51, 51, 0.04);
  button {
    width: 100%;
  }
}
@media (max-width: 550px) {
}
</style>
